<template>
    <div class="top">
      <div class="title">
        <div class="logo">
          <img src="./image/law_logo.png">
        </div>
        <div class="text">
          <span>法律案例智能宣传平台</span>
        </div>
      </div>
      <div class="user-info">
        <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
        <el-dropdown placement="bottom">
          <div style="display: flex; align-items: center; cursor: default">
            <el-image  :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' " alt="用户头像" style="width: 40px; height: 40px;border-radius:50%;margin: 0 5px"></el-image>
            <span>管理员{{ username }}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="checkFile">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="changePwd">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="login-btn-container">
        <el-button class="login_btn" type="primary" @click="login">登 录</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Top',
    data() {
      return {
        user: JSON.parse(localStorage.getItem('honey-user') || "{}")
      };
    },
    methods: {
      login() {
        this.$router.push('/login');
      }
    }
  }
  </script>
  
  <style scoped>
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150px;
    background: url('./image/topHeadBg.png');
  }
  
  .title {
    display: flex;
    align-items: center;
  }
  
  .logo img {
    width: 80px;
    height: 80px;
  }
  
  .text span {
    font-size: 30px;
    color: white;
    padding-left: 15px;
  }
  
  .user-info {
    display: flex;
    align-items: center;
  }
  
  .login-btn-container {
    padding-right: 80px;
  }
  
  .login_btn {
    color: white;
    font-size: 20px;
  }
  </style>
  